<template>
  <div class="app-container bg-blue-50 h-screen">
    <!-- 顶部菜单栏 -->
    <header class="h-12 bg-white shadow-sm">
      <nav class="flex items-center justify-between h-full px-4">
        <!-- 左侧主菜单 -->
        <div class="flex items-center space-x-4">
          <router-link 
            v-for="item in menuItems" 
            :key="item.path"
            :to="item.path"
            class="px-3 py-1 rounded hover:bg-blue-50"
          >
            {{ item.name }}
          </router-link>
        </div>

        <!-- 右侧功能和设置下拉菜单 -->
        <div class="flex items-center space-x-4">
          <!-- PDF功能下拉菜单 -->
          <a-dropdown trigger="hover">
            <a-button type="text">
              PDF功能
              <icon-down />
            </a-button>
            <template #content>
              <a-doption v-for="item in pdfMenuItems" :key="item.key">
                {{ item.title }}
              </a-doption>
            </template>
          </a-dropdown>

          <!-- AI功能下拉菜单 -->
          <a-dropdown trigger="hover">
            <a-button type="text">
              AI功能
              <icon-down />
            </a-button>
            <template #content>
              <a-doption 
                v-for="item in aiMenuItems" 
                :key="item.key"
                @click="handleMenuClick(item)"
              >
                {{ item.title }}
              </a-doption>
            </template>
          </a-dropdown>

          <!-- 设置下拉菜单 -->
          <a-dropdown trigger="hover">
            <a-button type="text">
              设置
              <icon-down />
            </a-button>
            <template #content>
              <a-doption v-for="item in settingsItems" :key="item.key">
                {{ item.title }}
              </a-doption>
            </template>
          </a-dropdown>
        </div>
      </nav>
    </header>

    <!-- 主要内容区 -->
    <main class="flex-1 p-6 h-[calc(100vh-3rem)]">
      <router-view></router-view>
    </main>

    <!-- 底部状态栏 -->
    <footer class="h-8 bg-white shadow-sm">
      <div class="flex items-center h-full px-4">
        <span class="text-sm text-gray-500">状态: 正常运行中</span>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from './store'
import { IconDown } from '@arco-design/web-vue/es/icon'

const router = useRouter()
const store = useAppStore()
const settings = ref(store.settings)

// 主导航菜单
const menuItems = [
  { name: '首页', path: '/' },
  { name: '任务管理', path: '/tasks' }
]

// PDF功能菜单
const pdfMenuItems = [
  { key: 'pdf-merge', title: 'PDF合并' },
  { key: 'pdf-to-excel', title: 'PDF转Excel' },
  { key: 'pdf-batch', title: '批量处理' }
]

// AI功能菜单
const aiMenuItems = [
  { key: 'ai-chat', title: 'AI对话', path: '/chat' },
  { key: 'pdf-qa', title: 'PDF问答', path: '/pdf-qa' },
  { key: 'voice-chat', title: '语音对话', path: '/voice-chat' }
]

// 设置菜单
const settingsItems = [
  { key: 'api-settings', title: 'API设置' },
  { key: 'general-settings', title: '常规设置' },
  { key: 'about', title: '关于' }
]

// 处理菜单点击
const handleMenuClick = (item: { key: string, title: string, path?: string }) => {
  if (item.path) {
    router.push(item.path)
  }
}
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
}
</style> 